<template>
	<view class="page">
		<cu-custom bgColor="bg-orange-form" :isBack="true">
		    <block slot="content">商家入驻</block>
		</cu-custom>
		<!-- <image class="apply_img" src="../../static/images/user/apply.png" mode="aspectFill"></image> -->
		<view class="apply_form">
			<form>
			    <view class="cu-form-group margin-top" style="border-radius: 20rpx;">
					<view class="title">店铺名称</view>
					<input placeholder="请输入店铺名称" v-model="form.title"  name="input"></input>
				</view>
				<view class="cu-form-group" @click="city_picker_show = !city_picker_show">
					<view class="title">所在地址</view>
						<view>{{form.province}} {{form.city}} {{form.area}} </view>
						<cityPicker :column="3" :default-value="defaultValue"   :maskCloseAble='true' :visible="city_picker_show" @confirm="select_city"/>
					<view class="cuIcon-right"></view>
				</view>
				<view class="cu-form-group">
					<view class="title">店铺类型</view>
					 <picker
					      mode="selector"
					      :range="cate_list"
					      range-key="cate_name"
					      @change="select_cate"
					    >
					      <view class="picker">
					        {{ selected_cate.cate_name ? selected_cate.cate_name : '选择分类' }}
					      </view>
					    </picker>
				</view>
				<view class="cu-form-group">
					<view class="title">详细地址</view>
					<input placeholder="请输入详细地址" v-model="form.address" name="input"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">姓名</view>
					<input placeholder="请输入姓名" v-model="form.user_name" name="input"></input>
				</view>
		
				<view class="cu-form-group">
					<view class="title">联系方式</view>
					<input placeholder="联系方式"  v-model="form.user_phone" type="number" name="input"></input>
				</view>
			
				
				<view class="cu-form-group" style="border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;">
					<view class="title">保证金</view>
					<input placeholder="免押金" class="text-orange-dark" disabled ></input>
				</view>
			</form>
			<view class="text-center padding-lr-sm">
				<view class="flex align-center">
					<checkbox-group class="block" @change="select_aggree">
						<checkbox style="transform:scale(0.7)" :class="form.agree ? 'checked' : ''"  value="1"  class="round orange"></checkbox>
					</checkbox-group>
					<view class="text-gray">我已阅读并同意 <span class="text-orange-light">《用户组局规则协议》</span></view>
				</view>
				<button class="cu-btn bg-orange-dark round lg margin-tb-lg" @click="submit_apply" style="width: 90%;text-align: center;">免费报名入驻</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { getMechantCate, merchantApply } from '@/api/merchant.js';
	 import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
	 import tools from '../../utils/tools.js'
	 import validate from '../../utils/validate';
	export default {
		  components: {
		            cityPicker
		        },
		data() {
			return {
				city_picker_show:false,
				form: {
					agree: true,
					address : '',
					user_name : '',
					user_phone :'',
					province:'湖南省',
					city : '长沙市',
					area : '开福区',
					title : '',
					merchant_type : ''
				},
				defaultValue: ['湖南省','长沙市','开福区'],
				cate_list : [],//分类
				// 包厢列表
				booth_list: [
					{ id: 1, title: '转转麻将豪华包间1' },
					{ id: 2, title: '转转麻将豪华包间2' },
					{ id: 3, title: '转转麻将豪华包间3' },
				],
				// 当前选中的包厢
				selected_cate: {}, // 默认选中第一个
			}
		},
		onLoad() {
			  this.getCategoryList()
		},
		methods: {
			 select_city (val) {
					this.form.province    = val.provinceName
					this.form.city        = val.cityName
					this.form.area        = val.areaName
				
				},

			RegionChange(e) {
			    this.region = e.detail.value
			},
			getCategoryList() {
			   getMechantCate().then(res=>{
				   this.cate_list = res.data;
			   });
			  
			},
			select_cate(event) {
				const index = event.detail.value; // 获取选中的索引
				this.selected_cate = this.cate_list[index]; // 更新选中的包厢
				this.form.merchant_type = this.selected_cate.id
			},
			select_aggree(e) {
				var values = e.detail.value[0];
				if (values) {
					this.form.agree = true;
				} else {
					this.form.agree = false;
				}
			},
			submit_apply(){
				if(validate.isEmpty(this.form.title)){
					return tools.Tips('商家名称不得为空')
				}
				if(validate.isEmpty(this.form.province)){
					return tools.Tips('请完善商家地址信息')
				}
				if(validate.isEmpty(this.form.city)){
					return tools.Tips('请完善商家地址信息')
				}
				if(validate.isEmpty(this.form.area)){
					return tools.Tips('请完善商家地址信息')
				}
				if(validate.isEmpty(this.form.address)){
					return tools.Tips('请完善商家地址信息')
				}
				if(validate.isEmpty(this.form.user_name)){
					return tools.Tips('联系人信息不得为空')
				}
				if(!validate.checkMobile(this.form.user_phone)){
					return tools.Tips('联系人手机号不合法')
				}
				if(validate.isEmpty(this.form.merchant_type)){
					return tools.Tips('请选择店铺类型')
				}
				
				if(!this.form.agree){
					return tools.Tips('请先同意规则协议')
				}
				uni.showLoading({
					title:'提交中...'
				})
				merchantApply(this.form).then(res=>{
					uni.hideLoading();
					tools.Tips('提交成功...');
					setTimeout(uni.navigateTo({
						url:'/pages/user/index'
					 }),500)
				})
			}
		}
	}
</script>

<style scoped>
	.page {
		width: 100%;
		height: 1600rpx; /* 使用 min-height 而不是 height */
		background-image: url('../../static/images/user/apply.png');
		background-size: cover; /* 按比例缩放并覆盖整个区域 */
		background-position: center; /* 居中显示 */
		background-repeat: no-repeat; /* 不重复 */
	}

	.apply_img {
		width: 100%;
		height: 100%;
	}

	.apply_form {
		position: relative; /* 改为 relative */
		background: #fff;
		margin: 24rpx; /* 使用 margin 而不是绝对定位 */
		border-radius: 20rpx;
		padding: 20rpx; /* 添加内边距 */
		top: 700rpx; /* 调整表单距离顶部的距离 */
	}
	.title {
		width: 200rpx;
	}
</style>